<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="dahuiji.css" />
	<script type="text/javascript">
		/*
		 *  角色：
		 * 1.引擎
		 * 		1. 选择
		 * 			1》获取元素
		 * 			2》添加事件
		 * 			3》移除
		 * 			4>记录游戏难度
		 * 		2.加载
		 * 			1》创建并添加logo
		 * 			2>创建并添加loading
		 * 			3>创置背景图运动
		 * 			4》超时 - 清场 - 开始游戏
		 * 		3.开始游戏
		 * 			1》我主飞机入场
		 * 			2》开火
		 * 			3》创建敌机
		 *		4.设置敌机概率
		 * 2.我方飞机
		 * 		1.创建
		 * 		2.初始化
		 * 		3.设置运动
		 * 		4.开火（注意频率）
		 * 		5.数组（记录创建的子弹）
		 * 3.子弹
		 * 		1.创建
		 * 		2.初始化
		 * 		3.设置运动
		 * 		4.爆炸（注意清除子弹和数组中的子弹）
		 * 4.敌机
		 * 		1.创建
		 * 		2.初始化
		 * 		3.设置定位
		 * 		4.设置运动 
		 * 		5.碰撞检测
		 */
		window.onload = function(){
			new Engine();
		}
		//引擎
		function Engine(){
			//实例属性
			this.ele = document.getElementById("body_main"); //获取引擎
			this.ullis = this.ele.children[0].children; //获取所有的li选项
			//初始化方法（引擎）
			this.init();
		}
		Engine.prototype = {
			init : function(){
				var that = this;
				for(var i = 0;i < this.ullis.length;i ++){
					//记录下标
					this.ullis[i].index = i; //记录游戏难度选项
					this.ullis[i].onclick = function(){
						//删除选项
						this.parentNode.remove();
						that.loadPage();
						//设置开火频率
						that.frequecy = this.index;
					}
				}
			},
			loadPage : function(){
				this.logo = createEle("div","logo");
				appendBody(this.logo);
				this.loading = createEle("div","loading");
				appendBody(this.loading);
				var that = this;
				var index = 1
				this.loadTimer = setInterval(function(){
					that.loading.style.background = "url(images/loading" + (index ++ % 3 + 1) + ".png) no-repeat";
				},500)
				//设置背景图运动
				var positionY = 0;
				setInterval(function(){
					that.ele.style.backgroundPositionY = ++positionY + "px";
				},30)
				//设置超时定时器（3秒后进入游戏）
				setTimeout(function(){
					//清场
					that.logo.remove();
					that.loading.remove();
					clearInterval(that.loadTimer);
					that.startGame();
				},3000)
			},
			startGame : function(){
				//我方飞机入场
				Plane.init();
				Plane.fire(this.frequecy); //调用开火，传入游戏难度
				this.createEnemy(); //创建敌机
			},
			createEnemy : function(){
				//设置小、中、大敌机出现的概率
				setInterval(function(){
					Math.random() > 0.5 ? new Enemy(0) : "";
				},500)
				setInterval(function(){
					Math.random() > 0.5 ? new Enemy(1) : "";
				},3000)
				setInterval(function(){
					Math.random() > 0.2 ? new Enemy(2) : "";
				},8000)
			}
		}
		//我方飞机
		var Plane = {
			ele : createEle("div","my-warplain"),
			init : function(){
				appendBody(this.ele);
				//定位我方飞机
				this.ele.style.left = document.documentElement.clientWidth / 2 - this.ele.offsetWidth / 2 + "px";
				this.ele.style.top = document.documentElement.clientHeight - this.ele.offsetHeight + "px";
				this.sport();
			},
			sport : function(){
				var body_main = document.getElementById("body_main");
				var that = this;
				document.onmousemove = function(evt){
					var e = evt || window.event;
					var left = e.pageX - that.ele.offsetWidth / 2;
					var top = e.pageY - that.ele.offsetHeight / 2;
					//设置边界
					if(left <= body_main.offsetLeft){
						left = body_main.offsetLeft;
					}else if(left >= body_main.offsetLeft + body_main.offsetWidth - that.ele.offsetWidth){
						left = body_main.offsetLeft + body_main.offsetWidth - that.ele.offsetWidth;
					}
					that.ele.style.left = left + "px";
					that.ele.style.top = top + "px";
				}
			},
			fire : function(frequecy){
				//设置开火频率
				var defaultFrequecy = 200;
				switch(frequecy){
					case 0 : defaultFrequecy = 500;break;
					case 1 : defaultFrequecy = 400;break;
					case 2 : defaultFrequecy = 200;break;
					case 3 : defaultFrequecy = 50;
				}
				//设置编号
				var id = 0;
				var that = this;
				setInterval(function(){
					//创建子弹并添加到数组中
					that.bullet.push(new Bullet(id));
					id ++;
					console.log(that.bullet);
				},defaultFrequecy)
			},
			bullet : [] //放置子弹
			
		}
		//子弹
		function Bullet(id){
			this.id = id;
			//创建子弹
			this.ele = createEle("div","bullet");
			//初始化子弹
			this.init();
		}
		Bullet.prototype = {
			init : function(){
				//给子弹打上编号 
				this.ele.id = this.id;
				//将子弹添加到页面中
				appendBody(this.ele);
				//定位子弹
				this.ele.style.left = Plane.ele.offsetLeft + Plane.ele.offsetWidth / 2 -this.ele.offsetWidth / 2 + "px";
				this.ele.style.top = Plane.ele.offsetTop - this.ele.offsetHeight + "px";
				this.sport();
			},
			sport : function(){
				var that = this;
				this.timer = setInterval(function(){
					that.ele.style.top = that.ele.offsetTop - 15 + "px";
					if(that.ele.offsetTop <= 10){
						that.boom(); //调用爆炸函数
						
					}
				},50)
			},
			boom : function(){
				this.ele.className = "bullet_die";
				clearInterval(this.timer);
				var that = this;
				setTimeout(function(){
					that.ele.remove();
					for(var i = 0;i < Plane.bullet.length;i ++){
						if(that.ele.id == Plane.bullet[i].id){
							Plane.bullet.splice(i,1);
						}
					}
				},80)
				
			}
		}
		//敌机工厂
		function Enemy(type){
			this.type = type;
			this.init();
		}
		Enemy.prototype = {
			init : function(){
				switch(this.type){
					case 0 : this.ele = createEle("div","enemy-small");
							 this.hp = 1;
							 this.speed = 10;
							 break;
					case 1 : this.ele = createEle("div","enemy-middle");
							 this.hp = 5;
							 this.speed = 8;
							 break;
					case 2 : this.ele = createEle("div","enemy-large");
							 this.hp = 50;
							 this.speed = 2;
				}
				//加到页面中
				appendBody(this.ele);
				//定位敌机
				this.position();
			},
			position : function(){
				var body_main = document.getElementById("body_main");
				this.ele.style.left = randomInt(body_main.offsetLeft,body_main.offsetLeft + body_main.offsetWidth - this.ele.offsetWidth) + "px";
				this.ele.style.top = 0;
				this.sport();
			},
			sport : function(){
				var that = this;
				this.timer = setInterval(function(){
					that.ele.style.top = that.ele.offsetTop + that.speed + "px";
					if(that.ele.offsetTop >= document.documentElement.clientHeight){
						that.ele.remove();
						clearInterval(that.timer);
					}
					that.collision(); //调用碰撞检测方法
				},50)
				
			},
			collision : function(){
				for(var i = 0;i < Plane.bullet.length;i ++){
					if(!(Plane.bullet[i].ele.offsetLeft + Plane.bullet[i].ele.offsetWidth < this.ele.offsetLeft ||  this.ele.offsetLeft + this.ele.offsetWidth < Plane.bullet[i].ele.offsetLeft)){
						if(!(Plane.bullet[i].ele.offsetTop + Plane.bullet[i].ele.offsetHeight < this.ele.offsetTop ||   this.ele.offsetTop + this.ele.offsetHeight < Plane.bullet[i].ele.offsetTop)){
							Plane.bullet[i].boom();
							this.hp --;
							if(this.hp <= 0){
								this.ele.remove();
							}
						}
					}
				}
			}
		}
		//工具箱
		//删除子元素
		Element.prototype.remove = function(){
			this.parentNode.removeChild(this);
		}
		//创建节点对象
		function createEle(tagName,className){
			var ele = document.createElement(tagName);
			ele.className = className;
			return ele;
		}
		//添加元素到页面
		function appendBody(ele){
			document.body.appendChild(ele);
		}
		//随机整数
		function randomInt(min,max){
			return Math.floor(Math.random() * (max - min + 1) + min);
		}
	</script>
</head>
<body>
	<div id="body_main" class="main">
			<ul id="options" class="options">
				<li value="1">超级困难</li>
				<li value="2">非常困难</li>
				<li value="3">比较困难</li>
				<li value="4">就选我吧</li>
			</ul>
	</div>
</body>
</html>